import React, { PureComponent } from 'react';
import { Form,Icon, Input, Button,message  } from 'antd';
import { withRouter } from 'react-router-dom';
import axios from 'axios';
import api from '@api';
const FormItem = Form.Item;
class LoginPan extends PureComponent {
    state = { 
        loading:false,
     }

    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFields((err,value)=>{
            if(err) return;
            let obj = this.props.form.getFieldsValue(['userName','password']);
            this.setState({
                loading:true
            })
            axios.post(api.doLogin,obj).
            then(({data,data:{code,msg}})=>{
               this.setState({
                   loading:false
               });
               if(code == 200){
                const {history,location} = this.props;
                history.push({
                    pathname:'/',
                });
               }else{
                message.error(msg);
               }
            }).
            catch((error)=>{
                this.setState({
                    loading:false
                });
            });
        })
    }

    render() {

        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
          };
          const { getFieldDecorator  } = this.props.form;

        return (
           <div className="login_pan_con">
                <div className='login_pan'>
                <Form onSubmit={this.handleSubmit}
                    layout='horizontal'
                >
                    <FormItem
                    {...formItemLayout}
                        label='用户名'
                    
                    >
                    {
                        getFieldDecorator('userName',{
                            rules: [{ required: true, message: '用户名不能为空!' }],
                        })(
                            <Input
                            placeholder='输入用户名'
                        />
                        )
                    }
  
                    </FormItem>
                    <FormItem
                    {...formItemLayout}
                    label='密码'
                    >
                        {
                            getFieldDecorator('password',{
                                rules: [{ required: true, message: '密码不能为空!' }],
                            })(
                                <Input type='password'
                                placeholder='输入密码'
                             />
                            )
                        }
                        
                    </FormItem>
                    <FormItem style={{textAlign:'center'}}>
                        <Button className='loginBtn' loading={this.state.loading} htmlType='submit' type='primary'>登陆</Button>
                    </FormItem>
                </Form>
            </div> 
                </div>
             
        );
    }
}
LoginPan = Form.create()(LoginPan);
LoginPan = withRouter(LoginPan);
export default LoginPan;